<template>
    <div class="pagination">
        <button :class="currentPage==1?'btn':''" @click="handleClick(currentPage-1)" class="pagination-btn">&lt;</button>
        <ul class="pagination-ul">
            <li @click="handleClick(1)" :class="currentPage==1?'active':''">1</li>
            <li v-show="totalPage>7&&currentPage>4" @click="handleClick(currentPage-5)" @mouseover="isShow=false" @mouseout="isShow=true">
                <span v-if="isShow" class="pagination-dian">&hellip;</span>
                <span v-else>&laquo;</span>
            </li>
            <li @click="handleClick(item)" :class="currentPage==item?'active':''" v-for="(item,index) in pages" :key="index">{{item}}</li>
            <li v-show="totalPage>7&&currentPage<totalPage-3" @click="handleClick(currentPage+5)" @mouseover="isShow1=false" @mouseout="isShow1=true">
                <span v-if="isShow1" class="pagination-dian">&hellip;</span>
                <span v-else>&raquo;</span>
            </li>
            <li @click="handleClick(totalPage)" :class="currentPage==totalPage?'active':''">{{totalPage}}</li>
        </ul>
        <button :class="currentPage==totalPage?'btn':''" @click="handleClick(currentPage+1)" class="pagination-btn">&gt;</button>
    </div>
</template>

<script>
export default {
    props: {
        currentPage: {
            type: Number,
            default: 1
        },
        "page-size": {
            type: Number,
            default: 5
        },
        total: {
            type: Number,
            default: 10
        }
    },
    data() {
        return {
            isShow: true,
            isShow1: true
        };
    },
    methods: {
        handleClick(page) {
            console.log(page);

            if (page < 1) {
                page = 1;
            }
            if (page > this.totalPage) {
                page = this.totalPage;
            }
            this.$emit("current-change", page);
        }
    },
    computed: {
        totalPage() {
            return Math.ceil(this.total / this.pageSize);
        },
        pages() {
            let start = this.currentPage - 2;
            let end = this.currentPage + 2;
            let arr = [];
            if (start < 2) {
                start = 2;
            }
            if (end - start < 4) {
                end = start + 4;
            }
            if (end > this.totalPage - 1) {
                end = this.totalPage - 1;
            }
            if (end - start < 4) {
                start = end - 4;
            }
            if (start < 2) {
                start = 2;
            }
            for (let i = start; i <= end; i++) {
                arr.push(i);
            }
            return arr;
        }
    }
};
</script>

<style scoped>
.pagination {
    /* white-space: nowrap; */
    padding: 2px 5px;
    color: #303133;
    font-weight: 700;
}

.pagination-ul {
    /* user-select: none; */
    list-style: none;
    display: inline-block;
    vertical-align: top;
    font-size: 0;
    padding: 0;
    margin: 0;
}

.pagination-ul li {
    margin: 0 5px;
    min-width: 30px;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    font-size: 13px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    background-color: #f4f4f5;
    color: #606266;
}

.pagination-dian {
    margin-top: -8px;
}

.pagination-ul li:hover {
    color: #409eff;
}

.pagination-ul li span {
    text-align: center;
    font-size: 16px;
}

.pagination-btn {
    outline: none;
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
    background-size: 16px;
    cursor: pointer;
    border: none;
    display: inline-block;
    font-size: 16px;
    height: 28px;
    line-height: 28px;
    vertical-align: top;
    box-sizing: border-box;
}

.btn {
    cursor: no-drop;
}

.active {
    background-color: #409eff !important;
    color: #fff !important;
}
</style>